<template>
    <el-dialog title="供应商信息" :visible.sync="isShow" @close = "closeDialog">

<el-form :model="ptForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline = "true">

<div style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; padding: 0 12px;">
<span style="font-size: 16px; font-weight: bold;">产品类别信息</span>
<div>
  <el-button type="primary" @click="submitForm">确定</el-button>
  <el-button @click="closeDialog">取消</el-button>
</div>
</div>

<el-form-item label="产品类别名称">
    <el-input  v-model="ptForm.ptName" style="width: 205px;"></el-input>
</el-form-item>
        <!-- /////////////////////////////////////////////////////////////////////////////// -->
        <br>
        <el-form-item label="照片" prop="imageurl">
    <el-upload
      class="upload"
      action="#"
      list-type="picture-card"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :http-request="handleUpload"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
   
    >

      <img v-if="ptForm.imageurl" :src="ptForm.imageurl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </el-form-item>
<!-- /////////////////////////////////////////////////////////////////////////////// -->
</el-form>
</el-dialog>
</template>

<script>
export default {
    name:'proTypeInfo',
    props:{
        isShow:Boolean,
        proInfo:Object
    },
    data(){
        return{
            ptForm:{
                ptName:'',
                ptid:0,
                imageurl:''
            },
        }
    },
    methods:{
        submitForm(){
          this.$refs['ruleForm'].validate((valid) => {
            //valid代表验证结果
            if (valid) {//true代表校验通过，可以将数据提交给后台
                let url = "/addPt"
                if(this.ptForm.ptid != 0){
                    url = "/updatePt"
                }
                debugger
                this.$http.post(url,this.ptForm).then(res =>{
                    if(res.data === 'success'){
                        this.$emit('supSave',res.data)
                    } else{
                        this.$message.error("服务器错误")
                    }
                })
            } 
        });
        },
        closeDialog(){
            this.ptForm = {
                ptName:'',
                ptid:0,
                imageurl:0
            }
            //重置数据并关闭弹框
            this.$emit('closeDialog')
            //重置验证信息
            this.$refs['ruleForm'].resetFields();
        },
                ///////////////////////////////////////////
                beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG || isPNG && isLt2M;
    },
    // 自定义上传方法（核心）
  async handleUpload(config) {
    // config 包含上传的文件信息：config.file 是选中的文件
    const file = config.file;

    // 第一步：如果存在旧图片，先删除旧图片
  if (this.ptForm.imageurl) { // 检查是否有旧图片URL
    try {
      // 调用后端删除图片接口（需后端配合实现）
      await this.$http.post('/deleteimage', { 
        imageUrl: this.ptForm.imageurl // 传入旧图片的URL
      });
      console.log('旧图片删除成功');
    } catch (err) {
      console.error('删除旧图片失败：', err);
      // 可选：删除旧图失败时，仍可继续上传新图（避免阻塞流程）
      this.$message.warning('旧图片删除失败，但将继续上传新图片');
    }
  }
    
    // 构建FormData（文件上传必须用multipart/form-data格式）
    const formData = new FormData();
    formData.append('file', file); // 后端接口用@RequestParam("file")接收
    
    // 调用后端接口
    debugger
    this.$http.post('/addPicture', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'  // 显式指定内容类型
      }
    }).then(res => {
      // 上传成功：调用el-upload的成功回调，更新组件状态
      if (res.data.code === 200) {
        this.ptForm.imageurl = res.data.data; // 存储后端返回的图片URL
        config.onSuccess(res.data); // 通知组件上传成功
        this.$message.success('图片上传成功');
      } else {
        config.onError(res.data); // 通知组件上传失败
        this.$message.error('图片上传失败：' + res.data.msg);
      }
    }).catch(err => {
      // 网络错误处理
      config.onError(err);
      this.$message.error('上传失败：网络错误');
      console.error('上传错误：', err);
    });
  },
  // 新增：删除图片时清空表单中的图片路径
  handleRemove(file, fileList) {
    if (fileList.length === 0) {
      this.ptForm.imageurl = ''; // 最后一张图片被删除，清空路径
      this.imageUrl = ''; 
    }
  },
    handleSuccess(res, file) {
      this.imageUrl = this.ptForm.imageurl;
    }
        ///////////////////////////////////////////
    },
    watch:{
        isShow(val){
            //val代表父组件传递的新的isShow值
            this.dialogFormVisible = val
            // this.getProType()
        },
          proInfo:{
              handler(val){
                  //将父组件要修改的员工信息赋值给当前表单绑定的empForm对象
                   this.ptForm = {...val}
              },
          }
    }
}
</script>

<style>
/* 上传组件中的图片样式 */
.avatar {
  width: 100px;  /* 固定宽度 */
  height: 100px; /* 固定高度 */
  object-fit: cover; /* 保持比例裁剪图片，避免变形 */
}

/* 上传按钮图标大小调整（可选） */
.avatar-uploader-icon {
  font-size: 28px;
  width: 120px;
  height: 150px;
  line-height: 100px;
}
</style>